<template>
	<div class="pagination">
		<div class="page">
			<span>{{bengin}}页/</span>
			<span>共{{pageNumber}}页</span>
		</div>
		<div class="prev-next">
			<span @click='prev' :class='{nocolor:bengin == 1}'>上一页</span>
			<span @click='next' :class='{nocolor:bengin == pageNumber}'>下一页</span>
		</div>
		<div class="gopage">
			<span class="spacing">跳转到:</span>
			<div class="go-conent">
			<input type="number" name="" v-model='gopage'>
			<span @click='go'>GO</span>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	props:[
		'total',
		'pageSize'
	],
	data() {
		return{
			bengin:1,
			gopage:''
		}
	},
	computed:{
		pageNumber(){
			return this.total/this.pageSize
		}
	},
	watch:{
		bengin(){
			this.$emit('change',this.bengin)
		}
	},
	methods:{
		prev(){
			if(this.bengin != 1){
				this.bengin--;
			}
		},
		next(){
			
			if(this.bengin < this.pageNumber){
				this.bengin ++			
			}
		},
		go(){
			if(this.gopage){
				this.bengin =this.gopage
			}
			 if(parseInt(this.gopage) > this.pageNumber){
				this.bengin = this.pageNumber;;
				this.gopage = this.pageNumber;
			}else if(parseInt(this.gopage) < 1)	{
				this.bengin = 1;
				this.gopage = 1;
			}
		}
	}
}	
</script>
<style lang='scss' rel='stylesheet/scss'>
	.pagination{
		display: flex;
		line-height: 30px;
		font-size: 12px;
		color:#999999;
		.nocolor{
			color:#cccccc;
		}
		.page{
			margin-right: 10px;
		}
		.prev-next{
			display: flex;
			span{
				display: inline-block;
				cursor: pointer;
				width: 70px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				border: 1px solid #999999;
				border-radius: 3px;
				user-select: none;
				&:nth-of-type(1){
					margin-right: 10px;
				}
			}
		}
		.gopage{
			display: flex;
			.spacing{
				margin: 0 10px;
			}
			.go-conent{
				display: flex;
				width: 76px;
				border:1px solid #999999;
				border-radius: 3px;
				input{
					display: inline-block;
					margin: 1px 2px;
					width: 36px;
					height: 28px;
					outline: 0;
					border: none;
				}
				span{
						display: inline-block;
						width: 37px;
						height: 30px;
						line-height: 30px;
						text-align: center;
						cursor: pointer;
						color:#ffffff;
						background-color:#06aea6;
						user-select: none;
					}
			}
		}
		input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{                
	    	-webkit-appearance: none !important;           
	    }
	}
</style>